<template>
    <div class="fans-item">
        <div class="v-i-pic">
            <a :href="'/o/user/userCenter/' + fans.followId">
                <img v-lazy="downloadUrl + fans.userCover" />
                <div class="v-i-title">
                    {{ fans.nickName }}
                </div>
            </a>
        </div>
        <div class="v-button">
            <el-button class="apply" @click="deleteUserFollow(fans)" v-if="fans.isFollowEach && isFan" size="small"
                type="success">已互粉</el-button>
            <el-button class="apply" @click="deleteUserFollow(fans)" v-else-if="isFan" size="small"
                type="primary">取消关注</el-button>
            <el-button class="apply" @click="addUserFollow(fans)" v-else size="small" type="primary">关注</el-button>
        </div>
    </div>
</template>

<script>
import { addUserFollow, deleteUserFollow } from "@/api/user/userFollow";

export default {
    name: "fans-item",
    props: {
        fans: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            isFan: true,
            downloadUrl: process.env.VUE_APP_DOWNLOAD_URL,
        };
    },

    methods: {
        addUserFollow(fans) {
            addUserFollow(fans).then((res) => {
                this.isFan = true;
            });
        },
        deleteUserFollow(fans) {
            deleteUserFollow(fans).then((res) => {
                this.isFan = false;
            });
        },
    },
};
</script>

<style scoped>
.fans-item {
    box-sizing: border-box;
    width: 120px;
    height: 175px;
    margin: 10px;
    border: 1px solid #000000;
    border-radius: 6px;
    overflow: hidden;
    background-color: white;
}

.v-i-pic {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 120px;
    margin: 10px;
}

.v-i-pic img {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.v-i-title {
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    font-size: 14px;
    text-align: center;
    word-break: break-all;
}

.v-i-title:hover {
    color: #52aae2;
}

.v-button {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>